<template>
  <div class="mcont">
      
    <div v-show="notick" style=" margin: 0 auto;
     text-align: center;" >还没有订单</div>

    <div class="block">
         

    
      <el-timeline>
        <el-timeline-item :timestamp="user.created" placement="top" v-for="(user,key) in users" :key=key>
            <!-- {blogId:blog.id}/-->
          <el-card>
            <el-container>
              <el-aside width="200px">
                
               <el-image  :src="user.avatar"   class="imgsize" style="width:50%;height:auto" ></el-image>
                
              
               </el-aside>
              <el-container>
                <el-header> </el-header>
                <el-main>    
                  <el-row :gutter="20">
                   <el-col :span="6"><div class="grid-content bg-purple">用户名:{{user.username}} </div></el-col>
                    <el-col :span="6"><div class="grisd-content bg-purple">邮箱:{{user.email}}</div></el-col>
                    
                   
                    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                  
                  </el-row>
                </el-main>
                <el-footer><p style="float:right;  border:1px " >
                   <router-link :to="{name:'useradmedt',params:{blogId:user.id}}"><!-- {blogId:blog.id}/-->
                  <el-button>账号管理</el-button>
                </router-link>
                  </p></el-footer>
                
              
               
              </el-container>
            </el-container>

             
            
              
          </el-card>
          
        </el-timeline-item>
      </el-timeline>

       <el-pagination class="mpage" background layout="prev, pager, next" 
      :current-page="currentpage" 
      :page-size="pageSize" 
      :total="total"
      @current-change=page
      >
      </el-pagination>
      
      
          <el-dialog title="退款理由" :visible.sync="dialogFormVisible">
      
  <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
  <el-form-item
    label="用户名"
    prop="username"
    :rules="[
      { required: true, message: '用户名不能为空'},
    ]"
  >
    <el-input type="username" v-model="form.username" autocomplete="off"></el-input>
  </el-form-item>
   <el-form-item
    label="邮箱"
    prop="email"
    :rules="[
      { required: true, message: '邮箱不能为空'},
    ]"
  >
    <el-input type="email" v-model="form.email" autocomplete="off"></el-input>
  </el-form-item>
 <el-form-item
    label="密码"
    prop="password"
    :rules="[
      { required: true, message: '密码不能为空'},
    ]"
  >
    <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
  </el-form-item>
  
  <el-form-item>
    <el-button type="primary" @click="submitForm2('form')">提交</el-button>
   <el-button  @click="resetForm('form')">重置</el-button>
  </el-form-item>
</el-form>

    </el-dialog>

    </div>
  </div>
</template>

<script>
import Header from "../components/Header";
export default {
  name: "Blogs.vue",
  components: { Header },
  data(){
      return {
        rules:{},
        form:{},
        users:{},
        formName:{},
        dialogFormVisible:false,
          blogs:{},
          currentpage:1,
          total:0,
          title:'123',
          pageSize:5,
          input3:'',
          notick:false,
      }
  },
  methods:{
      page(currentpage){
          const _this = this
           if(!JSON.parse(sessionStorage.getItem("userInfo")).id){
              console.log('+++++++++++++++++++++++++++++++++')
               this.$notify({
      title: "请先登录！",
      message: "登录后查询",
      duration: 1500,
    })
              }
        _this.$axios.get("/user/useradm?currentpage=" + currentpage,{
              headers: {
                "Authorization": localStorage.getItem("token")
              }
            }).then(res => {
            console.log('currentpagemessage:')
          console.log(res)
          _this.users = res.data.data.records
          _this.currentpage = res.data.data.current
          _this.total = res.data.data.total
          _this.pageSize = res.data.data.size
          console.log(res.data.data.records.length)
          

          })

         
      },
      gorefund(user){
          user.password=null
          this.formName=JSON.parse(JSON.stringify(user));//深拷贝防止重置双向绑定
          console.log(user)
          console.log('执行了')
          this.dialogFormVisible=true
          this.form=JSON.parse(JSON.stringify(user));
          this.form.password=""
          console.log("测试",this.formName)
          
      },  submitForm(formName) {
        const _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {//提交用
             _this.$axios.post("/order/refund" ,this.form,{
              headers: {
                "Authorization": localStorage.getItem("token")
              }
            }).then(res => {
            console.log('修改成功:')
          console.log(res)
          
         
          

          })


            this.dialogFormVisible=false
            //alert('提交完成!');
             this.$router.go(0);
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
          this.form=this.formName
          //formName=this.formName
          console.log("按下了",formName,this.formName)
           //this.form = this.$options.data().form
        //this.$refs[formName].resetFields();
      }
    
      
     
      
  },
  created(){
     
      console.log(this.page)
      this.page(1)
  }
};
</script>
<style scoped>
 .mpage{
     margin: 0 auto;
     text-align: center;
 }
</style>